<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卖家中心</title>
    <!--获取屏幕宽度，根据屏幕宽度进行自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入Bootstrap-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--导入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>


    <style>
        a:hover {
            color: #cc3333;
            text-decoration: none;
        }

        a {
            color: black;
            cursor: pointer;
        }
    </style>
</head>
<body>


<div class="container-fluid" style="margin-top: 1%">
    <!-- 头信息 -->
    <header>
        <div class="col-xs-offset-1">
            <img src="../shop/images/logo.png">
        </div>
        <hr>
        <div class="row" style="background-color: #A4D3EE">
            <div class="col-xs-2 col-lg-offset-1">
                <h3>GitBug 商城商品管理</h3>
            </div>

        </div>

    </header>

    <div class="row">
        <div class="col-xs-1 col-md-offset-1" style="background-color:whitesmoke;height:86%;position: absolute">
            <h4 style="padding:50% 0 10% 20%"><a href="home_admin.html">个人中心</a></h4>
            <h4 style="padding:10% 0 10% 20%"><a href="goods-manage.html">商品管理</a></h4>
            <h4 style="padding:10% 0 10% 20%"><a href="orderItems_admin.html">订单管理</a></h4>
        </div>
        <div class="col-lg-offset-2 " style="margin-top: 1%">
            <h3>个人中心&nbsp>&nbsp商品管理</h3>
            <hr>
        </div>
        <!-- 商品列表展示  -->
        <div class="col-lg-offset-2 col-md-9 " id="goods_vue">
           商品类型
            <input type="text" id="type" v-model="searchByType1">
            <input type="button" value="搜索" @click="searchByType"  >

            <table class="table table-striped table-bordered table-hover" style="margin-top: 1%">
                <thead>
                     <tr class="success" style="font-size: 18px">
                    <th style="width: 80px">商品编号</th>
                    <th style="width: 100px;text-align: center">商品名称</th>
                    <th style="width: 80px;text-align: center">商品价格</th>
                    <th style="width: 80px;text-align: center">商品数量</th>
                    <th style="width: 100px;text-align: center">商品介绍</th>
                    <th style="width: 110px;text-align: center">商品展示</th>
                    <th style="width: 75px;text-align: center">状态</th>
                    <th style="width: 80px;text-align: center">商品类型</th>
                    <th style="width: 150px;text-align: center">更新时间</th>
                    <th style="width: 100px;text-align: center">操作</th>
                </tr>

                </thead>
                <tbody>
                <tr v-for="goods in goodsList" style="font-size: 16px;text-align: center;height: 12%">
                    <td style="padding-top: 4%">{{goods.id}}</td>
                    <td style="color: #009cda">{{goods.goodsName}}</td>
                    <td style="padding-top: 4%;color: red">{{goods.price}}</td>
                    <td style="padding-top: 4%">{{goods.count}}</td>
                    <td>{{goods.introduction}}</td>
                    <td><img :src="goods.imgUrl" style="width: 110px;height: 110px"></td>
                    <td style="padding-top: 4%;color: orange">{{goods.status}}</td>
                    <td style="padding-top: 4%;color: deeppink">{{goods.type}}</td>
                    <td style="padding-top: 4%">{{goods.updateTime}}</td>

                    <td class="inputButton" style="text-align: center;padding-top: 2%">
                        <input type="button" class="button_shelves btn btn-success"
                               @click="shelves(goods)"  value="上架">
                        <input type="button" class="button_sold_out btn btn-danger"
                               @click="soldOut(goods)"  value="下架">
                    </td>
                </tr>
                </tbody>
            </table>
            <div  style="font-size: large;text-align: center">

                <div  v-for="(item,index) in currentPageData" :key="index">
                    <p>{{item.name}}</p>
                </div>

                <a @click="prevPage()">上一页</a>
                <span>第{{currentPage}}页/共{{totalPage}}页</span>
                <a @click="nextPage()">下一页</a>
            </div>
        </div>
    </div>

</div>


<!-- 页脚信息 -->

<div class="container-fluid" style="background-color: ghostwhite; margin-top: 5%; ">
    <div class="row" style="margin-top: 2%;margin-bottom: 5%">
        <div class="col-xs-1 col-xs-offset-2">
            <p style="">视频中心</p>
            <a>
                <div style="padding-top: 10%">新闻发布会</div>
            </a>
            <a>
                <div style="padding-top: 5%">发展历程</div>
            </a>
            <a>
                <div style="padding-top: 5%">直播</div>
            </a>
            <a>
                <div style="padding-top: 5%">员工视频</div>
            </a>
        </div>
        <div class="col-xs-1 ">
            <p style="">发现</p>
            <a>
                <div style="padding-top: 10%">成功故事</div>
            </a>
            <a>
                <div style="padding-top: 5%">公司年报</div>
            </a>
            <a>
                <div style="padding-top: 5%">管理层信息</div>
            </a>
            <a>
                <div style="padding-top: 5%">媒体图库</div>
            </a>
        </div>
        <div class="col-xs-1 ">
            <p style="">关注我们</p>
            <a>
                <div style="padding-top: 10%">新浪微博</div>
            </a>
            <a>
                <div style="padding-top: 5%">微信公众号</div>
            </a>
            <a>
                <div style="padding-top: 5%">优酷视频</div>
            </a>
            <a>
                <div style="padding-top: 5%">哔哩哔哩</div>
            </a>
        </div>
        <div class="col-xs-1 ">
            <a href="http://localhost:8080/views/shop/home2.html">商城主页</a>
        </div>

    </div>
</div>
</body>
</html>


<script>

    let vue = new Vue({
        el: '#goods_vue',
        data: {
            goodsList: {},
            totalPage: 1, // 统共页数，默认为1
            currentPage: 1, //当前页数 ，默认为1
            pageSize: 5, // 每页显示数量
            currentPageData: "",//当前页显示内容
            searchByType1:"",
        },
        methods: {
            refreshGoodsItems: function () {
                //发起http请求后台获取订单列表数据
                let url = "goodsManage.do"
                let thisObject = this;
                get(url,function (data) {
                    thisObject.goodsList = data;
                    //计算总共的页数
                    thisObject.totalPage = Math.ceil((thisObject.goodsList.length)/thisObject.pageSize);
                    //计算为0时设置为1
                    thisObject.totalPage = thisObject.totalPage === 0 ? 1 : thisObject.totalPage;
                    let begin = (thisObject.currentPage - 1) * thisObject.pageSize;
                    let end = thisObject.currentPage * thisObject.pageSize;
                    thisObject.currentPageData = thisObject.goodsList.slice(
                        begin,
                        end
                    );
                    thisObject.goodsList = thisObject.currentPageData;
                });
            },

            soldOut: function (goods) {
                let url = "soldOut";
                let thisObject = this;
                postWithJson(url,goods,function () {
                   thisObject.Pagination();

                });


            },

            shelves: function (goods) {
                let url = "shelves";
                let thisObject = this;
                postWithJson(url,goods,function () {
                   thisObject.Pagination();
                })

            },

            //根据商品类型获取商品信息，默认从id全部获取
            searchByType: function () {

                let url = "selectGoodsByType"
                var searchByType1 = this.searchByType1;
                let params = {searchByType:searchByType1};
                let thisObject = this;
                postWithParams(url,params,function (data) {
                    thisObject.goodsList = data;
                    //计算总共的页数
                    thisObject.totalPage = Math.ceil((thisObject.goodsList.length)/thisObject.pageSize);
                    //计算为0时设置为1
                    thisObject.totalPage = thisObject.totalPage === 0 ? 1 : thisObject.totalPage;
                    let begin = (thisObject.currentPage - 1) * thisObject.pageSize;
                    let end = thisObject.currentPage * thisObject.pageSize;
                    thisObject.currentPageData = thisObject.goodsList.slice(
                        begin,
                        end
                    );
                    thisObject.goodsList = thisObject.currentPageData;
                })
                this._data.currentPage = 1;
               console.log(this._data.currentPage);
        },
            //分页查询
            Pagination(){
                postWithParams('/findGoodsByPage',{currentPage:this._data.currentPage,pageSize:this._data.pageSize,searchByType:this._data.searchByType1},(data)=> {
                    // console.log(data)
                    this._data.goodsList = data.list;
                    console.log(this._data.goodsList)
                })
            },


            //上一页
            prevPage() {
                //console.log(this.currentPage);
                if (this.currentPage === 1) {
                    return false;
                } else {
                    this.currentPage--;
                }
                //调用分页查询
                this.Pagination()
            },


            // 下一页
            nextPage() {
                if (this.currentPage === this.totalPage) {
                    return false;
                } else {
                    this.currentPage++;

            }
                //调用分页查询
                this.Pagination()
            }
        },
        mounted: function () {
            //页面加载完成，并且vue对象加载完成之后调用
            this.refreshGoodsItems();

        },

    });
</script>
